import 'package:flutter/material.dart';
import '../../models/contact.dart';
import '../profile/profile_page.dart';
import '../../utils/avatar_utils.dart';

class ContactsPage extends StatelessWidget {
  const ContactsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('通讯录'),
        actions: [
          IconButton(
            icon: const Icon(Icons.person_add_alt_1),
            onPressed: () {},
          ),
        ],
      ),
      body: Stack(
        children: [
          ListView.builder(
            itemCount: mockContacts.length + 4, // +4 for top items
            itemBuilder: (context, index) {
              if (index == 0) return _buildTopItem(Icons.person_add, '新的朋友', Colors.orange);
              if (index == 1) return _buildTopItem(Icons.group, '群聊', Colors.green);
              if (index == 2) return _buildTopItem(Icons.label, '标签', Colors.blue);
              if (index == 3) return _buildTopItem(Icons.public, '公众号', Colors.blueAccent);

              final contact = mockContacts[index - 4];
              final showHeader = index - 4 == 0 ||
                  contact.indexLetter != mockContacts[index - 5].indexLetter;

              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (showHeader)
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                      color: const Color(0xFFEDEDED),
                      width: double.infinity,
                      child: Text(
                        contact.indexLetter,
                        style: const TextStyle(color: Colors.grey),
                      ),
                    ),
                  ListTile(
                    leading: contact.avatarUrl != null
                        ? Container(
                            width: 40,
                            height: 40,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(4),
                              image: DecorationImage(
                                image: NetworkImage(contact.avatarUrl!),
                                fit: BoxFit.cover,
                              ),
                            ),
                          )
                        : buildInitialsAvatar(contact.name, size: 40),
                    title: Text(contact.name),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => ProfilePage(
                            name: contact.name,
                            avatarUrl: contact.avatarUrl,
                          ),
                        ),
                      );
                    },
                  ),
                  const Divider(height: 1, indent: 72),
                ],
              );
            },
          ),
          Positioned(
            right: 0,
            top: 0,
            bottom: 0,
            child: Container(
              width: 24,
              alignment: Alignment.center,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: 27, // A-Z + #
                itemBuilder: (context, index) {
                  // Simplified index bar
                  final letter = String.fromCharCode('A'.codeUnitAt(0) + index);
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 2),
                    child: Text(
                      index < 26 ? letter : '#',
                      style: const TextStyle(fontSize: 10, color: Colors.grey),
                      textAlign: TextAlign.center,
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTopItem(IconData icon, String label, Color color) {
    return Column(
      children: [
        ListTile(
          leading: Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              color: color,
            ),
            child: Icon(icon, color: Colors.white),
          ),
          title: Text(label),
        ),
        const Divider(height: 1, indent: 72),
      ],
    );
  }
}
